<!--* 复选框组件-->
<!--* @module src/components/public-->
<!--* @desc 复选框-->
<!--* @author chenyi-->
<!--* @date 2019年08月15日17:22:43-->

<template>
    <div>
      <el-checkbox v-if="allChooseBtn" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <el-checkbox-group
           v-model="values"
           :min="min"
           :max="max"
           :size="size"
           :disabled="allDisabled"
           @change="handleCheckedChange" >

        <el-checkbox-button
          v-if="isButton"
          v-for="item in list"
          :label="item.value"
          :key="item.value"
          :disabled="item.disabled"
        >{{item.label}}</el-checkbox-button>

        <el-checkbox
          v-if="!isButton"
          v-for="item in list"
          :label="item.value"
          :key="item.value"
          :disabled="item.disabled"
        >{{item.label}}</el-checkbox>

      </el-checkbox-group>
    </div>
</template>

<script>
  import {getEnum, getDict, getDataByUrl} from '../../api/getComData'
  import util from '../../libs/util'
  export default {
    name:'es-checkbox',
    props: {
      dictName:String//字典
      ,data:Array//json数组
      ,enumName:String//枚举
      ,url:String //url
      ,value: Array
      ,allChooseBtn:Boolean//是否显示全选按钮
      ,allDisabled:Boolean//是否全部禁用
      ,max:{//最多选择数量
        type:Number
        ,default:1000
      }
      ,min:{//最少选择数量
        type:Number
        ,default:0
      }
      ,isButton:Boolean//是否是按钮样式
      ,size:String//大小

    },
    model:{
      event:'changeValue'
    },
    data: function () {
      return {
        list: [],
        values:this.value,
        checkAll:false,//是否全选
        isIndeterminate: true
      }
    },
    mounted: function () {
      let _this = this
      if (_this.dictName) {
        _this.list =util.getLocalStorageItem(_this.dictName);
        if (!_this.list) {
          getDict({dictName: _this.dictName}).then((res) => {
            _this.list = res.data
            util.setLocalStorageItem(_this.dictName, res.data)
          })
        }
      } else if (_this.enumName) {
        _this.list =util.getLocalStorageItem(_this.enumName);
        if (!_this.list) {
          getEnum({enumName: _this.enumName}).then((res) => {
            _this.list = res.data
            util.setLocalStorageItem(_this.enumName, res.data)
          })
        }
      } else if (_this.url) {
        getDataByUrl(_this.url, {enumName: _this.enumName}).then((res) => {
          _this.list = res.data
        })
      } else if (_this.data) {
          _this.list = _this.data
      }else{
        _this.$message.error("未指定数据源");
        return false;
      }
    },
    methods:{
      handleCheckAllChange(val) {
        let _this = this;
        this.values = []
        val && this.list.forEach(item=> {
          _this.values.push(item.value);
        });
        this.isIndeterminate = false;
      },
      handleCheckedChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.list.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.list.length;
      }
    },
    watch:{
      value:function (val) {
        this.values=val;
      },
      values:function (val) {
        this.$emit("changeValue",val);
      }
    }
  }
</script>

<style scoped>

</style>
